// 行列布局
.row {
	.flex-wrap;
	width: 100%;
	.col {
		display: block;
		.flex-item;
	}
	.col-3,
	.col-3-3,
	.col-4,
	.col-4-4,
	.col-5,
	.col-5-5 {
		width: 100%;
	}
	.col-3-1 {
		width: 33.333333%;
	}
	.col-3-2 {
		width: 66.666666%;
	}
	.col-4-1 {
		width: 25%;
	}
	.col-4-2 {
		width: 50%;
	}
	.col-4-3 {
		width: 75%;
	}
	.col-5-1 {
		width: 20%;
	}
	.col-5-2 {
		width: 40%;
	}
	.col-5-3 {
		width: 60%;
	}
	.col-5-4 {
		width: 80%;
	}
}

// 九宫格
.grid-col-2,
.grid-col-3,
.grid-col-4,
.grid-col-5 {
	position: relative;
	overflow: hidden;
	text-align: center;
	&:before {
		content: '';
		position: absolute;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		left: 0;
		top: 0;
		border-bottom: 1px solid @borderColor;
		transform-origin: 0 0;
		transform: scale(0.5);
	}

	.item {
		display: block;
		position: relative;
		float: left;
		padding: 10px 0px;
		box-sizing: border-box;
		color: @gridColTxtColor;
		&.hover {
			color: @gridColTxtColorHover;
		}
		&:before {
			content: '';
			position: absolute;
			box-sizing: border-box;
			width: 200%;
			height: 200%;
			left: 0;
			top: 0;
			border-bottom: 1px solid @borderColor;
			border-right: 1px solid @borderColor;
			transform-origin: 0 0;
			transform: scale(0.5);
		}
		.item-icon {
			.flex-wrap-center;
			width: 40px;
			height: 40px;
			margin: 0 auto;
			font-size: 30px;
			img {
				width: 75%;
				height: 75%;
			}
		}
		.item-label {
			.txt-line1;
			text-align: center;
			font-size: @l4;
		}
	}

	&.no-line {
		&:before,
		.item:before {
			display: none;
		}
	}
}

.grid-col-2 {
	.item:nth-child(2n):before {
		border-right-width: 0;
	}
	.item {
		width: 50%;
	}
}
.grid-col-3 {
	.item:nth-child(3n):before {
		border-right-width: 0;
	}
	.item {
		width: 33.333333%;
	}
}
.grid-col-4 {
	.item:nth-child(4n):before {
		border-right-width: 0;
	}
	.item {
		width: 25%;
	}
}
.grid-col-5 {
	.item:nth-child(5n):before {
		border-right-width: 0;
	}
	.item {
		width: 20%;
	}
}

// 滚动文字
.dwz-marquee-txt,
.dwz-marquee-list {
	overflow: hidden;
}

// 滚动表格
ul.grid {
	.tr {
		color: @txtColor;
		font-size: @l4;
		.flex-wrap;

		.td {
			line-height: 30px;
			.flex-wrap;

			&.right {
				justify-content: flex-end;
				align-items: flex-end;
			}
			&.w30 {
				width: 30px;
			}
			&.w40 {
				width: 40px;
			}
			&.w60 {
				width: 60px;
			}
			&.w80 {
				width: 80px;
			}
			&.w100 {
				width: 100px;
			}
			&.w120 {
				width: 120px;
			}
		}
	}
}

// flex 流式布局，根据item宽度适配
.flex-flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	.item {
		position: relative;
		flex-shrink: 0;
		display: flex;
		width: 50%;

		&.padding-center {
			.flex-wrap-center;
			padding: 10px;
			img {
				width: 100%;
			}
			.icon-del-x {
				position: absolute;
				top: 10px;
				right: 10px;
			}
		}
	}
}
